<template>
    <div class="add-card-con">
        <!-- <loading :loadStatus="loadStatus" :loading="loading" :hasComplete="hasComplete"></loading> -->
        <div class="user-info-item1">
            <div class="user-group">
                <div class="user-item1">
                    <div class="ui-first-item">
                        持卡人姓名
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入持卡人姓名" readonly="readonly" v-model="realname" />
                    </div>
                </div>
                <div class="user-item1">
                    <div class="ui-first-item">
                        身份证号
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入持卡人身份证号" readonly="readonly" v-model="id_cardno"/>
                    </div>
                </div>
                <div class="user-item2"></div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="user-info-item2">
            <div class="u2-title">请填写信用卡信息</div>
            <div class="user-group">
                <div class="user-item1">
                    <div class="ui-first-item">
                        卡号
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入您的信用卡号" v-model="bankcardNum" @keyup="bank_num_change" />
                    </div>
                </div>
                <div class="user-item1">
                    <div class="ui-first-item" >
                        手机号
                    </div>
                    <div class="ui-last-item">
                        <input placeholder="请输入银行预留手机号" v-model="phone" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"  />
                    </div>
                </div>
                <div class="user-item1">
                    <div class="ui-first-item" >
                        ccv
                    </div>
                    <div class="ui-last-item" >
                        <input placeholder="请输入cvv(信用卡背面后三位)" v-model="cvv" />
                    </div>
                </div>
                <div class="user-item1">
                    <div class="ui-first-item">
                        有效期
                    </div>
                    <div class="ui-last-item" >
                       <input placeholder="请输入有效期" v-model="expired_time" oninput="this.value=this.value.replace(/[^0-9.]+/,'');"  />
                    </div>
                </div>
                <div class="user-item2"></div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="save-btn">
            <input type="button" value="确定保存" @click="save_info"/>
        </div>
    </div>
</template>
<script>
import * as regular from '../utils/regular'
export default {
  data() {
    return {
      loadStatus: true,
      loading: true,
      hasComplete: true,
      has_data: true, //是否有数据
      realname:'',// 持卡人姓名
      id_cardno:'',// 持卡人身份证
      bankcardNum:'', // 银行卡号
      phone:'', // 持卡人卡号
      cvv:'', //信用卡背面后三位
      expired_time:'',  
    };
  },
  created() {
    let that = this
    that._load()
    //测试
  },
  methods: {
    // 初次load事件
    _load(){
        let that = this
        //获取用户信息 
        that.$api.ajax([that._getUserInfo()])
    },
    // 获取持卡人信息
    _getUserInfo(){
      let that = this
      let params = {
        openid: that.$storage.get("openid")
      }
      return new Promise(function(resolve, reject) {
        that.$api
          .getUserInfo(params)
          .then(res => {
            console.log("----打印用户信息----")
            console.log(res)
            if (res.RCD == 0) {
              that.realname = res.realname
              that.id_cardno = res.id_cardno
            } else {
              that.$totast(res.ErrMsg)
            }
            resolve()
          })
          .catch(err => {
            resolve()
          })
      })
    },
    //填卡
    bank_num_change(){
         if(/\S{5}/.test(this.bankcardNum)){
            this.bankcardNum = this.bankcardNum.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");
        }
    },
    //提交验证表单
    _validate(){
        let that = this
        if(!regular.hasContent(that.real_name)){
            that.$totast('真实姓名不能为空')
            return false   
        }
        if(regular.hasContent(that.id_cardno)){
            if((regular.removeAllSpace(that.id_cardno).length)!==18){
                that.$totast('身份证号码长度为18位')
                return false
            }
        }else{
            that.$totast('身份证号码不能为空')
            return false
        }
        if(!regular.hasContent(that.bankcardNum)){
            that.$totast('信用卡卡号不能为空')
            return false   
        }
        if(!regular.checkPhone(that.phone)){
            console.log(that.phone)
            that.$totast('手机号长度为11位')
            return false   
        }
        if(regular.removeAllSpace(that.cvv).length!=3){
            that.$totast('cvv长度为3位')
            return false   
        }
        if(!regular.removeAllSpace(that.expired_time)){
            that.$totast('请输入有效期')
            return false   
        }
        return true
    },
    //保存信用卡信息
    save_info(){
        let that = this
        that.$api.ajax([that.add_Card()])
    },
    // 添加信用卡
    add_Card() {
        let that = this
        if(that._validate()){
            let params = {
                realname:regular.removeAllSpace(that.realname),	//姓名
                idcardno:regular.removeAllSpace(that.id_cardno),	//身份证
                phone:regular.removeAllSpace(that.phone),	//手机号
                bankcardNum:regular.removeAllSpace(that.bankcardNum),	//信用卡号
                cvv:regular.removeAllSpace(that.cvv),	//信用卡号
                openid:that.$storage.get("openid"),
                expired_time:regular.removeAllSpace(that.expired_time)
            }
            console.log('---------打印添加参数---------')
            console.log(params)
            return new Promise(function (resolve,reject) {
                that.$api.addCard(params).then(res => {
                    if(res.RCD==0){
                        that.$router.push({
                            path:'ChoseCard'
                        })
                    }else{
                        that.$totast(res.ErrMsg)
                    }
                    resolve()  
                }).catch(err=>{
                    resolve() 
                })
            });
        }
    }
  }
};
</script>
<style lang="less" scoped>
.add-card-con {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  .user-info-item1 {
    padding-top: 6%;
  }
  .user-info-item2 {
    padding-top: 4%;
    .u2-title {
      padding: 0% 0 3% 4%;
      color: #999;
      font-size: 3.6vw;
    }
  }
  .user-group {
    width: 100%;
    background-color: #fff;
    .user-item1 {
      width: 96%;
      float: right;
      border-bottom: 1px solid #f5f5f5;
      .line-heigt(11vw);
    }
    .ui-first-item {
      float: left;
    }
    .ui-last-item {
      width: 64vw;
      float: right;
      input {
        width: 100%;
        .line-heigt(9vw);
        border: 0;
      }
    }
  }
  .line-heigt(@height) {
    height: @height;
    line-height: @height;
  }
  .save-btn {
    margin: 0 auto;
    margin-top: 14%;
    width: 94%;
    input {
      width: 100%;
      padding: 4%;
      background: url("../assets/yellow-bg.jpg");
      color: #fff;
      border: 0;
      border-radius: 1.5vw;
      font-size: 4.2vw;
    }
  }
}
.calendar-chose-selector {
  background-color: rgba(16, 16, 16, 0.27);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .chose-selector-con {
    width: 80%;
    position: absolute;
    top: 25%;
    left: 10%;
  }
}
</style>
